<!DOCTYPE html>
<html class="ui-page-login">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>user_change</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/app.css" rel="stylesheet" />
		<link href="css/mui.picker.css" rel="stylesheet" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			.mui-input-group label {
				width: 30%;
			}
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 70%;
			}
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			.mui-inline{
				height: auto;
				width: auto;
				
			}
			.mui-btn {
				padding: 10px;
			}
			.mui-content{
					background-color:rgb(117,195,235);		
			}
			
		</style>
	</head>

	<body onload="onloadbody()">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">编辑信息</h1>
		</header>
		<div class="mui-content">
			<div id="main-body" class="mui-control-content mui-active">
				<div class="mui-content-padded" style="height:55vw;background-image:url(img/log_education.png);background-size: 100%;margin: 10px 10px;"></div>
				<div class="mui-content-padded">
					<center>
						<div class="mui-inline">
							<img id='u_head' class="mui-icon-image" style="height: 80px;border-radius:50%;"/>
						</div><br/>
						<div id="head_change" type="button" class="mui-btn mui-btn-primary" style="width: 80px;height: 30px;line-height: 8px;" >
							更换头像
						</div><br/><br/>
					</center>
					<form class="mui-input-group">		
						<div class="mui-input-row">
							<label>用户昵称:</label>
							<!--onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')"-->
							<input id='u_name' type="text" class="mui-input-clear" maxlength="11">
						</div>
						<div class="mui-input-row">
							<label>年龄:</label>
							<input id='u_age' type="text" onkeyup="this.value=this.value.replace(/[^0-9-]/g,'');" maxlength="2" class="mui-input-clear">
						</div>
						<div class="mui-input-row">
	                        <label>性别</label>
	                        <select id="u_sex" style="width: 150px;float: left;">
	                        	<option>男</option>
	                        	<option>女</option>
	                        </select>                                      
	           			</div>
						<div class="mui-input-row">
							<label>住址:</label>
							<input id='u_address' type="text" readonly="readonly">
						</div>				
					</form>
				</div>									
				<div class="mui-content-padded" style="height: 70px;margin-top: 20px;">
					<center>				
					<button id="user_change" type="button" class="mui-btn mui-btn-primary" style="width: 160px;">
						确 认 修 改
					</button>
					</center>
				</div>					
			</div>					
		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/app.js"></script>
	<script src="js/DHJ.js"></script>
	<script src="js/mui.picker.js"></script>
	<script src="js/mui.poppicker.js"></script>
	<script src="js/city.data.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
	<script>
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
		//初始化界面获取个人信息
		function onloadbody(){
			var uid = localStorage.getItem("uid");
//			var uid = '1';
			mui.ajax({
				url:locationIP+"getUser",
				data:{
					uid:uid
				},
				dataType:'json',
				type:'post',
				success:function(data){
					//查看获取的数据状态
					console.log(JSON.stringify(data));
					if(data==null){
						mui.openWindow({
							url:'index.html',
							id:'index.html',
						});
					}else{
						//设置个人信息
						document.getElementById("u_head").src=data.user.uHead;
						document.getElementById("u_name").value=data.user.uName;
						document.getElementById("u_age").value=data.user.uAge;
						document.getElementById("u_sex").value=data.user.uSex;
						document.getElementById("u_address").value=data.user.uAddress;												
					};																
				},
				error: function(xhr,type,errorThrown){
	                mui.toast(type);
	            }
			});
		};	
		(function($, doc) {
			$.init();		
			$.ready(function() {				
				var _getParam = function(obj, param) {
					return obj[param] || '';
				};		
				var cityPicker3 = new $.PopPicker({
					layer: 3
				});
				cityPicker3.setData(cityData3);
				var showCityPickerButton = doc.getElementById('u_address');				
				showCityPickerButton.addEventListener('tap', function(event) {
					cityPicker3.show(function(items) {
						showCityPickerButton.value = _getParam(items[0], 'text') + "-" + _getParam(items[1], 'text') + "-" + _getParam(items[2], 'text');						
					});
				}, false);
			});									
		})(mui, document);
		
		document.getElementById("user_change").addEventListener('tap',function(){
			var uhead = document.getElementById("u_head").src;
			var uname = document.getElementById("u_name").value;
			var uage = document.getElementById("u_age").value;
			var usex = document.getElementById("u_sex").value;
			var uaddress = document.getElementById("u_address").value;
			var uid = localStorage.getItem("uid");
//			var uid = '1';
			mui.ajax({
				url:locationIP+"updateUser",
				data:{
					uid:uid,
					uhead:uhead,
					uname:uname,
					uage:uage,
					usex:usex,
					uaddress:uaddress
				},
				dataType:'json',
				type:'post',
				crossDomain:true,
				success:function(data){
					//查看获取的数据状态
					console.log(JSON.stringify(data));
					if(data>0){
						mui.alert("修改成功",function(){
							mui.openWindow({
								url:'user_center.html',
								id:'user_center.html'
							});
						});						
					}else{
						mui.alert("修改失败");									
					};																
				},
				error: function(xhr,type,errorThrown){
	                mui.toast(type);
	            }
			});
		});
		
		document.getElementById("head_change").addEventListener('tap',function(){
			mui.openWindow({
				url:'img.html',
				id:'img.html'
			});
		});
	
	</script>
</html>